<template>
  <div :class="['process-node', `process-node-type-${form?.nodeStatus}`, `process-node-state-${form?.nodeStatus}`]">
    <div v-if="form?.nodeStatus && form?.nodeStatus !== 'norun'">
      <avic-icon v-if="form?.meta.nodeIcon" class="task-node" :svg="form?.meta.nodeIcon" />
    </div>
    <div v-else>
      <avic-icon v-if="form?.meta.nodeIcon" class="task-node-icon" :svg="form?.meta.nodeIcon" />
    </div>
    <div class="task-node-label">
      {{ form?.alias }}
      <div v-if="form?.nodeStatus && form?.nodeStatus !== 'norun'" class="node-icon-extra">
        <div v-if="form?.candidate?.responsibleUnitName" class="node-owner-dept">
          <avic-icon svg="avic-organization-chart" class="node-extra-icon" />
          {{ form.candidate.responsibleUnitName }}
        </div>
        <!-- 已完成节点：节点完成时间 -->
        <div v-if="form?.nodeStatus === 'over'" class="node-finish-date">
          <avic-icon svg="avic-time-line" class="node-extra-icon" />
          {{
            (form?.activity?.activityEndDate && $dayjs(form.activity.activityEndDate).format('YYYY-MM-DD')) ||
            form?.candidate?.planCompleteTime ||
            '--'
          }}
        </div>
        <!-- 当前节点：计划完成时间 -->
        <div v-if="form?.nodeStatus === 'run'" class="node-finish-date">
          <avic-icon svg="avic-time-line" class="node-extra-icon" />
          {{ form?.candidate?.planCompleteTime || '--' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Piservice',
  inject: ['getNode'],
  data() {
    return {
      node: null,
      form: null
    };
  },
  mounted() {
    this.node = (this as any).getNode();
    this.form = this.getNode().getData();
    this.node.on('change:data', () => {
      this.form = this.getNode().getData();
    });
  }
});
</script>
<style lang="less" scoped>
@import '../../../style/node.less';
</style>
